<template>
  <canvas ref="domRef"/>
</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue"
import { createAlphaSquare } from "./composible"
const props = defineProps({
  color: {
    type: String,
    default: "#000000",
  },
  width: {
    type: Number,
    default: 100,
  },
  height: {
    type: Number,
    default: 30,
  },
})
const attr = reactive({
  alphaSize: 5,
})
const domRef=ref()
watch([() => props.color], (newValue, old) => {
  renderColor()
})
onMounted(() => {
  renderColor()
})
const renderColor = () => {
  const canvas = domRef.value
  const width = props.width
  const height = props.height
  const size = attr.alphaSize
  const canvasSquare = createAlphaSquare(size)
  const ctx = canvas.getContext("2d")
  canvas.width = width
  canvas.height = height
  ctx.fillStyle = ctx.createPattern(canvasSquare, "repeat")
  ctx.fillRect(0, 0, width, height)
  ctx.fillStyle = props.color
  ctx.fillRect(0, 0, width, height)
}
</script>
